<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 5000px;
            margin: 0;/*覆盖浏览器8px的外边距*/
        }
        .fu{
            width: 500px; /*宽度*/
            height: 100px; /*高度*/
            border: 1px solid red; /*边框*/
        }
        .zi{
            width: 50px; /*宽度*/
            height: 50px; /*高度*/
            background: green; /*背景色*/
            top: 20px; /*左距离，无定位方式时失效*/
            left: 20px; /*上距离，无定位方式时失效*/
            z-index: -1; /*调整z轴，默认0*/
        }
        .fu:hover{
            margin-left: 100px;
        }
        .gudin{
            width: 50px; /*宽度*/
            height: 50px; /*高度*/
            background: yellow; /*背景色*/
        }
    </style>
</head>
<body>
<section class="fu" style="position: revert">
    <div class="zi" style="position: absolute"></div>
    <p>锚点</p>
</section>
<div class="gudin" style="position: fixed">固定定位 </div>
</body>
</html>